<template>
	<el-input
	    v-model="keyword"
	    placeholder="请输入姓名关键字"
	    class="input-with-select"
		style="width:60%"
	>
	    <template #append>				
	        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	    </template>        
	</el-input>
	<el-button primary @click="addInit()">+增加部门</el-button>
	<el-button warning @click="deleteBatch()">批量删除</el-button>
	 
<!-- 大表 -->
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column min-width="15%" type="selection"></el-table-column>
		<el-table-column prop="id" label="id" sortable />
		<el-table-column prop="description" label="院系" sortable />
		<el-table-column prop="no" label="编号" sortable/>
		<el-table-column prop="parent.description" label="所属院系" sortable />
		<el-table-column prop="haveChild" label="haveChild" sortable />	
		<el-table-column label="操作" width="120"> 
		   <template #default="scope">
			  <el-button size="small" @click="editInit(scope.row)"
				type="primary" circle><el-icon><Edit /></el-icon></el-button>
			  <el-button
				size="small"
				type="danger"
				@click="handleDelete(scope.row.id)"
				 circle><el-icon><Delete /></el-icon></el-button>
			</template>				
		</el-table-column>
	</el-table>    
	
	
<!-- 分页组件 -->
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
		:page-count="pageCount"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/> 
	  
	  
<!-- 增加学院对话框 -->
	<el-dialog v-model="dialogVisible" title="增加学院" width="60%" draggable>
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
		  <el-form-item label="院系" prop="description">
		    <el-input v-model="form.description" />
		  </el-form-item>
	      <el-form-item label="编号" prop="no">
	        <el-input v-model="form.no" />
	      </el-form-item>
		  <el-form-item label="所属院系" >
		    <el-input v-model="form.parent" />
		  </el-form-item>
		  <el-form-item label="haveChild">
		    <el-input v-model="form.haveChild" />  
		  </el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="addSubmit()">提交</el-button>
	    </span>
	  </template>
	</el-dialog>
	
	<!--  修改对话框 -->
	<el-dialog v-model="editVisible" title="修改" width="60%" draggable>
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="院系" prop="description">
	        <el-input v-model="form.description" />
	      </el-form-item>
	      <el-form-item label="编号" prop="no">
	        <el-input v-model="form.no" />
	      </el-form-item>
	      <el-form-item label="所属学院" >
	        <el-input v-model="form.parent" />
	      </el-form-item>
	      <el-form-item label="haveChild" >
	        <el-input v-model="form.haveChild" />
	      </el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="editVisible = false" >取消</el-button>
	      <el-button type="primary" @click="editSubmit()">提交</el-button>
	    </span>
	  </template>
	</el-dialog> 
		
	
	
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
		import{ useRouter } from 'vue-router'
		let { proxy } = getCurrentInstance();
		
		var tableData=ref([]);
		var pageCount=ref(0)//总页数
		var pageSize=ref(4)
		var currentPage=ref(1)
		
		let pagination=ref({
			"pagination":{
				"pageNo":currentPage,
				"pageSize":pageSize,
			}
		})
		function getTableData(){
		    proxy.$http.post("/findFaculty",pagination.value,
			{"headers":{"token":window.sessionStorage.getItem("token")}})
			.then(res => {
				tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
				//总页数
				pageCount.value=res.data.totalPages;
			})
			.catch(err => {
				console.log(err)
			});
		}
		//钩子函数,组件加载完自动执行
		onMounted(()=>{
			getTableData();  //请求第一页的表格数据
		});
		
		//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
		function haddlePageChange(currentpage){			
			currentPage.value=currentpage;
			getTableData();		
		}
		
	
		let form=ref({});//修改或增加的一个对象	
		//增加
		const dialogVisible = ref(false)//增加对话框是否显示
		function addInit(){//增加初始化
			dialogVisible.value = true
		}
		function addSubmit(){
			proxy.$http.post("/Faculty",form.value,
			{"headers":{"token":window.sessionStorage.getItem("token")}})
			.then(res => {
				dialogVisible.value = false //关闭对话框		
				getTableData();  //更新表格数据
				form.value={}  //清空增加对象
				alert(res.data.message)
				
			})
		}
		//修改
		let editVisible=ref(false)
		const editInit = (row) => {
			form.value=row//要修改的对象赋值给对话框表单数据
			editVisible.value = true
		}
		const editSubmit=()=>{
			proxy.$http.put("/Faculty",form.value,
			{"headers":{"token":window.sessionStorage.getItem("token")}})
			.then(res => {
				editVisible.value = false	//关闭对话框		
				getTableData();  //更新表格数据
				form.value={}  //清空修改对象
				alert(res.data.message)	
			})
		}
		const handleDelete = (id) => {
		  proxy.$http.delete('/Faculty?id='+id,
		  {"headers":{"token":window.sessionStorage.getItem("token")}})
		  .then(res => {
		  	alert(res.data.message)
			getTableData();
		  })
		}
		//批量删除的选中的选项
		let multipleSelection=ref([]);
		//批量选择
		const handleSelectionChange=(val)=>{ 
			multipleSelection.value = val;
			console.log(multipleSelection.value)
		}
		//批量删除
		function deleteBatch(){
			if(multipleSelection.value){
				proxy.$http.post(
				'/FacultyDeleteBatch',
				multipleSelection.value,
				{"headers":{"token":window.sessionStorage.getItem("token")}})
				.then(res => {			
					getTableData();  //更新表格数据
					alert(res.data.message)
				})
			}
		}
		
		//按关键字查询
			const keyword=ref('')
			let findByName = ref({
		    "pagination":{
		        "pageNo":currentPage,
		        "pageSize":pageSize
		    },
		    "conditionList":[
		        {     "value":keyword,
		             "key":"description",
		                "operator":"LIKE"
		        }
		    ]
		})
			let search=()=>{
				if(keyword.value=='')
					keyword.value=null
				proxy.$http.post('/findFaculty',findByName.value,
				{"headers":{"token":window.sessionStorage.getItem("token")}})
				.then(res => {
					tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
					pageCount.value=res.data.totalPages;
					keyword.value==''
				})
				.catch(err => {
					console.log(err)
				});
			}
		
	
		const isNum = (rule, value, callback) => {
			const id = /^[0-9]*$/
			if(value==''||value==null)  //补充了非空和长度校验
			    callback(new Error('不能为空!'))
			else if (!id.test(value)) {
				callback(new Error('请输入数字!'))
			} else {
				callback()
			}	  
	
		};
		const isNum2 = (rule, value, callback) => {
			const id = /^[0-9]*$/
			if (!id.test(value)) {
				callback(new Error('请输入数字!'))
			} else {
				callback()
			}	  
			
		};
		const formRules = reactive({
			no: [
			  {validator: isNum,required: true,trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
			],		
			description: [
			  {required: true, message: '请输入名称', trigger: 'blur'},
			  {min: 3, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
			],
			parent_id: [
			  {validator: isNum2,required: true,trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
			],
			haveChild: [
			  {validator: isNum,required: true,trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
			],
		})
</script>


 